
<!-- 重点信息统计 -->
<script lang="ts" setup>
import { onMounted } from "vue";
import { BsKeyInfoStaticCount } from "@/genapi/wh_bak";
defineOptions({ name: 'KeyInformation' });
onMounted(() => {
  getdata()
})
const getdata = async () => {
  let res = await BsKeyInfoStaticCount()
  data.value=[
  {
    label: '危险化工工艺(个)',
    value: res.data.dangerCraftNum,
  },
  {
    label: '危险化学品(个)',
    value: res.data.dangerChemicalNum,
  },
  {
    label: '重大危险源(个)',
    value: res.data.dangerSourceNum,
  },
  {
    label: '消防设备(个)',
    value: res.data.fireEqpNum,
  },
  {
    label: '第三方单位(家)',
    value: res.data.thirdUnitNum,
  },
  {
    label: '特种设备(个)',
    value: res.data.specialEqpNum,
  }
  ]
}
const data = ref([
  {
    label: '危险化工工艺(个)',
    value: '2223',
  },
  {
    label: '危险化学品(个)',
    value: '2,445',
  },
  {
    label: '重大危险源(个)',
    value: '2,445',
  },
  {
    label: '消防设备(个)',
    value: '2,445',
  },
  {
    label: '第三方单位(家)',
    value: '2,445',
  },
  {
    label: '特种设备(个)',
    value: '2,445',
  },
]);


</script>

<template>
  <div
    flex="~ col"
    bg="[linear-gradient(143deg, #165DFF 0%, #56AEFF 100%)]"
    rd="4px"
    p="x-30px y-24px"
    max-w="550px"
    text="#fff"
  >
    <div text="20px" font="bold" p="b-24px" lh="28px">重点信息统计</div>
    <div grid="~ cols-2 gap-x-30px gap-y-30px">
      <div
        v-for="item in data"
        :key="item.label"
        class="stat-item"
        flex="~ col justify-around"
        h="94px"
        p="x-20px y-10px"
      >
        <span text="16px">{{ item.label }}</span>
        <span text="20px" font="bold">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.stat-item {
  background: url('@/assets/bg/bg1.svg');
  background-size: 100% 100%;
}
</style>
